<template>
    <div class="register">
        <el-form :model="registerForm" ref="registerForm" :rules="rules" size="mini" label-position="right">
            <el-form-item label="昵称" prop="name">
                <el-input v-model="registerForm.name"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    name="multipartFile"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    accept="image/png,image/gif,image/jpg,image/jpeg">
                    <img v-if="registerForm.avatar" :src="baseURL+registerForm.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item prop="address" label="收货地址">
                <el-input v-model="registerForm.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <div class="mobile">
                    <el-input v-model="registerForm.mobile" class="mobile-input"></el-input>
                    <el-button @click="getValidCode" v-if="isTimeOut" class="ml8">获取验证码</el-button>
                    <el-button disabled v-if="!isTimeOut">{{countdown}}s</el-button>
                </div>
            </el-form-item>
            <el-form-item label="验证码" prop="validCode">
                <el-input v-model="registerForm.validCode"></el-input>
            </el-form-item>
            <el-form-item label="支付密码" prop="payPsw">
                <el-input v-model="registerForm.payPsw" type="password"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="psw1">
                <el-input v-model="registerForm.psw1" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="psw2">
                <el-input v-model="registerForm.psw2" type="password"></el-input>
            </el-form-item>
        </el-form>
        <div class="center">
            <el-button size="mini" @click="save">注册</el-button>
            <el-button type="text" class="font-small" @click="$router.push({name:'login'})">去登录</el-button>
        </div>
    </div>

</template>

<script>
    import _axios, {baseURL} from "../../utils/axios";

    export default {
        name: "register",
        data() {
            const validatePsw2 = (rule, value, callback) => {
                console.log(value);
                if (!value || value !== this.registerForm.psw1) {
                    return callback(new Error('密码不一致'));
                }
                else {
                    return callback();
                }

            };
            return {
                registerForm: {
                    name: '',
                    avatar: '',
                    address: '',
                    mobile: '',
                    validCode: '',
                    payPsw: '',
                    psw1: '',
                    psw2: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur', whitespace: true},
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur', whitespace: true},
                    ],
                    address: [
                        {required: true, message: '请选择地址', trigger: 'blur', whitespace: true},
                    ],
                    validCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur', whitespace: true},
                    ],
                    payPsw: [
                        {required: true, message: '请输入支付密码', trigger: 'blur', whitespace: true},
                    ],
                    psw1: [
                        {required: true, message: '请输入密码', trigger: 'blur', whitespace: true},
                    ],
                    psw2: [
                        {validator: validatePsw2, trigger: 'blur'},
                    ],
                },
                baseURL: baseURL,
                uploadUrl: baseURL + '/api/common/uploadFile?type=infoImg',
                isTimeOut: true,
                countdown: 60,
                validCode: '',
                confirmCorrect: false,
                trueCode: ''
            }
        },
        methods: {
            getValidCode() {
                this.isTimeOut = false;
                _axios.get('/api/api/common/mobileCode?mobile=' + this.registerForm.mobile).then(res => {
                    this.trueCode = res.msg;
                    let timer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            this.isTimeOut = true;
                            clearInterval(timer);
                        }
                    }, 1000);
                })
            },


            handleAvatarSuccess(res, file) {
                this.registerForm.avatar = res.msg;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            save() {
                this.$refs.registerForm.validate(valid => {
                    this.$api.user.register({
                        avatar: this.registerForm.avatar,
                        mobile: this.registerForm.mobile,
                        mobileCode: this.registerForm.validCode,
                        name: this.registerForm.name,
                        password: this.registerForm.psw1,
                        address: this.registerForm.address,
                        payCode: this.registerForm.payPsw
                    }).then(res => {
                        if (res.code === 200) {
                            this.$router.push({name: 'login'});
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                })
            }
        },
        mounted() {
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .register {
        .center {
            text-align: center;
        }
        .el-form {
            .mobile {
                display: flex;
                justify-content: space-between;
                &-input {
                    width: 60%;
                }
            }
            .el-input {
                width: 70%;
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: $text-color-primary;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>
